<template>
  <view 
    class="result-custom-page"
    v-if="isLoadOk" 
  >
    <image style="width: 100%;" :src="img" mode="widthFix"></image>
    <image style="width: 100%;" :src="img2" mode="widthFix"></image>

    <view class="abs-bg-mask"></view>
    <view class="abs-bg-pos">
      <view style="width: 100%; height: 100%; position: relative;">
        <image class="img" :src="img" mode="widthFix"></image>
        <view class="main-content-abs">
            <!-- <view class="main-txt">您的情绪电池健康为{{bVal}}</view> -->
            
            <view class="battery-comp-abs">
              <battery-comp :num="bVal" />
            </view>
            
        </view>
      </view>
      
      <view style="width: 100%;height: 100%; position: relative;">
        <image class="img2" :src="img2" mode="widthFix"></image>
        <view class="main-content-abs-2">
          <view class="options-wrapper"
            :style="{
              'justify-content': optnList.length>1 ? 'space-between' : 'center',
              'paddingTop': optnList.length>1 ? '0' : '24rpx'
            }"
          > 
            <view class="opt-item" v-for="(item,index) in optnList" :key="index">
              <view class="img-wrapper">
                <image class="img" :src="item.img" mode="widthFix"></image>
              </view>
              <view class="text">{{item.txt}}</view>
            </view>
          </view>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
  import batteryComp from './batteryComp.vue'
  export default{
    components:{
      batteryComp
    },
    props:{
      pageData:{
        type:Object,
        default:null
      },
      showCanvas:{
        type:Boolean,
        default:true
      }
    },
    data(){
      return {
        isLoadOk:false,
        img:'',
        img2:'',
        dData:{
          
        },
        bVal:0,
        optnList:[
          // {
          //   img:'https://img-wxkj.feifanxinli.com/consult/zx01/202409/folder02/file01/ea1cefcc449c467abe4a2b93e467ec1c.PNG',
          //   txt:'融入团队困难'
          // }
        ]
      }
    },
    watch:{
      pageData:{
        handler(v){
          if(v){
            this.report = v
            this.img = v.img
            this.img2= v.img2
            this.bVal = v.num
            this.optnList = v.optnList
            this.isLoadOk = true
          }
        },
        immediate:true,
        deep:true
      }
    },
  }
</script>

<style lang="scss" scoped>
  @keyframes charging {
  	50% {
          box-shadow: 0 14rpx 28px rgba(0, 150, 136, 0.83), 0px 4rpx 10rpx rgba(9, 188, 215, 0.4);
      }
      
      95% {
          top: 5%;
          filter: hue-rotate(0deg);
          border-radius: 0 0 5rpx 5rpx;
          box-shadow: 0 14rpx 28rpx rgba(4, 188, 213, .2), 0 10rpx 10rpx rgba(9, 188, 215, 0.08);
      }
      100% {
          top: 0%;
          filter: hue-rotate(0deg);
          border-radius: 15rpx 15rpx 5rpx 5rpx;
          box-shadow: 0 14rpx 28rpx rgba(4, 188, 213, 0), 0 10rpx 10rpx rgba(9, 188, 215, 0.4);
      }
  }
  
  @keyframes move {
      100% {
          transform: translate(-50%, -160px) rotate(720deg);
          // transform: translate(-50%, -160px) rotate(720deg);
      }
  }
  
  .options-wrapper{
    display: flex;
    flex-wrap: wrap;
        margin-top: 110rpx;
            justify-content: space-between;
            padding: 0 26rpx;
        

        // justify-content: center;
        row-gap: 16rpx;
        column-gap: 20rpx;
    
    .opt-item{
      width: 330rpx;
      height: 76rpx;
      background: #FFFFFF;
      border-radius: 38rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 24rpx;
      
      .img-wrapper{
        display: flex;
        align-items: center;
        margin-right: 10rpx;
        
        .img{
          width: 40rpx;
          height: 40rpx;
        }
      }
      
      .text{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }
  
  .result-custom-page{
    box-sizing: border-box;
    width: 100vw;
    min-height: 100vh;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);  
    // background-color: #c6cefa;
    
    .abs-bg-mask{
       position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
      background: rgba(255, 255, 255, 0.4); /* 白色朦胧效果 */
          backdrop-filter: blur(10px); /* 朦胧效果 */
    }
    
    .abs-bg-pos{
      position: absolute;
      // top: -40rpx;
      top: 0;
      left: 0;
      right: 0;
    
      .img{
        width: 100%;
      }
      .img2{
        margin-top: -12rpx;
        width: 100%;
      }
      
      .main-content-abs{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        .battery-comp-abs{
          position: absolute;
          right: 0;
          
          top: 110rpx;
          left: 0px;
              
          display: flex;
          justify-content: flex-end;
          box-sizing: border-box;
          padding-right: 76rpx;
        }
        
      }
    
      .main-content-abs-2{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      
      
    }
    
    
  }
</style>